<template>
  <div class="login">
    <a-row>
      <a-col :sm="{ offset: 4, span: 20 }" class="login-title">
        <!-- <img src="../assets/logo.svg" /> -->
        <span> {{ title }} </span>
      </a-col>
    </a-row>
    <a-form
      :hideRequiredMark="true"
      name="login"
      ref="formRef"
      :label-col="{ sm: { span: 4 } }"
      :wrapper-col="{ sm: { span: 20 } }"
      :model="formState"
      @finish="login"
    >
      <a-form-item :label="t('login.account')" name="username" :rules="getRules(t('login.account'))">
        <a-input v-model:value="formState.username" autocomplete="on" :placeholder="t('login.account')" />
      </a-form-item>
      <a-form-item :label="t('login.pwd')" name="password" :rules="getRules(t('login.pwd'))">
        <a-input v-model:value="formState.password" type="password" :placeholder="t('login.pwd')" />
      </a-form-item>
      <!-- <FormItem :label="t('login.captcha')" name="code" :rules="getRules(t('login.captcha'))" class="login-captcha">
        <Input v-model:value="formState.code" :placeholder="t('login.captcha')" :disabled="isCaptchaLoading">
          <template #addonAfter>
            <Spin :spinning="isCaptchaLoading">
              <div class="login-captcha-img">
                <img
                  :src="captchaUrl"
                  alt="captcha"
                  @load="onCaptchaLoad"
                  @click="clickCaptcha"
                  @error="onCaptchaError"
                />
              </div>
            </Spin>
          </template>
        </Input>
      </FormItem> -->
      <a-form-item :wrapper-col="{ sm: { span: 20, offset: 4 } }" name="rememberMe">
        <a-checkbox v-model:checked="formState.rememberMe">{{ t("login.remMe") }}</a-checkbox>
      </a-form-item>
      <a-form-item :wrapper-col="{ sm: { span: 20, offset: 4 } }">
        <a-button
          type="primary"
          html-type="submit"
          block
          :loading="loading"
          :disabled="isCaptchaLoading || redirecting"
          >{{ redirecting ? "跳转中..." : t("login.login") }}</a-button
        >
        <a-typography-text type="danger" v-show="errMsg">
          {{ errMsg }}
        </a-typography-text>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { message } from "ant-design-vue";
// import { LoadingOutlined, CloseCircleFilled } from "@ant-design/icons-vue";
import { onMounted, reactive, ref, watch } from "vue";
import { useStore } from "/@/store";
import { useI18n } from "vue-i18n";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/img";
import authCache from "/@/utils/cache/authCache";

export default {
  components: {},
  setup() {
    // const router = useRouter();
    const { t } = useI18n();
    const store = useStore();
    const formRef = ref();
    const loading = ref(false);
    const errMsg = ref("");
    //captcha start
    const captchCheckStatus = ref(0);
    const captchaUrl = ref(DEFAULT_IMG_BASE64_STR);
    const isCaptchaLoading = ref(false);
    const onCaptchaLoad = () => {
      isCaptchaLoading.value = false;
    };
    const clickCaptcha = async () => {
      if (isCaptchaLoading.value) return;
      isCaptchaLoading.value = true;
      const url = await store.dispatch("user/getCaptchaImgUrl");
      captchaUrl.value = url;
    };
    const onCaptchaError = () => {
      captchaUrl.value = DEFAULT_IMG_BASE64_STR;
      message.error(t("login.captchaLoadErr"));
    };
    onMounted(() => {
      // clickCaptcha();
    });
    //captcha end
    const formState = reactive({
      username: "",
      password: "",
      // code: "",
      rememberMe: false,
    });
    const title = import.meta.env.VITE_APP_TITLE;
    watch(
      () => formState.username,
      () => {
        errMsg.value = "";
      }
    );
    watch(
      () => formState.password,
      () => {
        errMsg.value = "";
      }
    );
    // watch(
    //   () => formState.code,
    //   () => {
    //     errMsg.value = "";
    //   }
    // );
    const redirecting = ref(false);
    const login = async () => {
      loading.value = true;
      errMsg.value = "";
      try {
        await store.dispatch("user/login", { ...formState });
        redirecting.value = true;
      } catch (err: any) {
        if (err) {
          errMsg.value = err.msg;
        }
      } finally {
        loading.value = false;
      }
    };
    onMounted(() => {
      const userInfo = authCache.getRemUserInfo();
      if (userInfo) {
        formState.rememberMe = true;
        Object.assign(formState, userInfo);
      }
    });
    return {
      formRef,
      formState,
      loading,
      login,
      getRules(text: String) {
        return [{ required: true, message: "请输入" + text }];
      },
      title,
      t,
      captchaUrl,
      captchCheckStatus,
      isCaptchaLoading,
      onCaptchaLoad,
      clickCaptcha,
      onCaptchaError,
      errMsg,
      redirecting,
    };
  },
};
</script>
<style lang="less">
.login {
  max-width: 400px;
  margin: 0 auto;
  padding: 100px 16px 16px;
}
.login-title {
  text-align: center;
  padding-bottom: 10px;
}
.login-title img {
  width: 150px;
}
.login-title span {
  font-size: 20px;
  display: inline-block;
}
.login-captcha {
  .ant-input-group {
    display: flex;
    align-items: center;
  }
  .ant-input {
    display: block;
    flex: 1;
  }
  .ant-input-group-addon {
    background-color: #fff;
    display: block;
    width: auto;
    border: 0;
    padding: 0;
    margin-left: 5px;
  }
  .ant-input-affix-wrapper {
    flex: 1;
  }
}
.login-captcha-img {
  width: @captcha-width;
  height: @ant-form-label-height;
  position: relative;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: @captcha-width;
    height: @captcha-height;
    cursor: pointer;
  }
}
</style>
